(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.l1'));
  
    // 使用AJAX获取数据
    $.ajax({
      url: '/zhilian/findCountBySectorAndExperience?sector=Web前端',
      type: 'GET',
      dataType:"json",
      success: function(data) {
        console.log(data)
          const x = []
          const y = []
          for(var i = 0;i<data.length;i++){
              x.push(data[i].experience)
              y.push(data[i].count)
          }
          console.log(x)
          console.log(y)
        // 指定图表的配置项和数据
        option = {
          // 标题
          title: {
            text: 'Web前端职业工作经验要求',
            textStyle: {
              color: "#fff"
            }
          },
          // 提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          // x轴相关设置
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              color: "rgb(185,184,206)",
                interval: 0
            },

          },
          // y轴相关设置
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "rgb(185,184,206)"
            },
            // 修改背景线条样式
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(72,71,83)"
              }
            }
          },
          series: [{
            data: y,
            type: 'bar',
            // 柱子宽度
            barWidth: '50%'
          }],
          // 颜色
          color: ['rgb(51,152,219)'],
          // 网格配置
          grid: {
            // 配合left right top bottom 设置图表的大小
            left: '3%',
            right: '8%',
            bottom: '5%',
            // 网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
            containLabel: true
          }
        };
  
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
  
        // 监听窗口大小变化
        window.addEventListener("resize", function() {
          myChart.resize()
        });
      },
      error: function(xhr, status, error) {
        console.error('Error fetching chart data:', error);
      }
    });
  })();


(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.l2'));

    // 使用 AJAX 获取后端返回的数据
    $.ajax({
        url: 'http://localhost:8080/zhilian/findCountByAddressAndEducation?address=上海',
        type: 'GET',
        success: function(data) {
            // 指定图表的配置项和数据
            option = {
                // 标题
                title: {
                    text: '上海全岗位招聘学历要求',
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    below:'5%',
                    left:'center',
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center:['50%','60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data.map(function(item) {
                        return { value: item.count, name: item.education };
                    })
                }],
                //颜色
                color: ['rgb(73,146,255)', 'rgb(136,255,195)', 'rgb(253,221,96)', 'rgb(255,110,118)','rgb(154,167,190)','rgb(30,146,167)','rgb(88,90,90)'],
                legend: {
                    top: '10%',
                    textStyle: {
                        color: 'rgb(172,171,194)'
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }
    });

    window.addEventListener("resize", function() {
        myChart.resize()
    })
})();


(function() {
    //右一
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.r1'));

    // 使用 AJAX 获取数据
    $.ajax({
        url: 'http://localhost:8080/zhilian/findSalaryBySectorAndAddress?sector=Web前端',
        type: 'GET',
        success: function(data) {
            // 提取 address 和 a_salary 数据
            var addresses = data.map(item => item.address);
            var salaries = data.map(item => item.a_salary);

            // 指定图表的配置项和数据
            var option = {
                // 标题
                title: {
                    text: '平均薪资最多的前五名城市',
                    textStyle: {
                        color: "#fff",
                    },
                },
                xAxis: {
                    type: 'category',
                    data: addresses,
                    axisLabel: {
                        color: "rgb(175,174,197)"
                    }
                },
                yAxis: {
                    type: 'value',
                    //修改坐标轴
                    axisLabel: {
                        color: "rgb(175,174,197)"
                    },
                    //修改背景线条样式
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgb(72,71,83)"
                        }
                    }
                },
                //网格配置
                grid: {
                    //配合left right top bottom 设置图表的大小
                    left: '3%',
                    right: '8%',
                    bottom: '5%',
                    //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
                    containLabel: true
                },
                // 提示框组件。
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [{
                    data: salaries,
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'blue' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'transparent' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data:', error);
        }
    });

    window.addEventListener("resize", function() {
        myChart.resize()
    })
})();


(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.r2'));

    // 使用 AJAX 获取后端返回的数据
    $.ajax({
        url: 'http://localhost:8080/zhilian/findCountBySectorAndAddress?address=上海',
        type: 'GET',
        success: function(data) {
            const y4= []
            const x4=[]
            for(var i = 0;i<data.length;i++){
                x4.push(data[i].sector)
                y4.push(data[i].count)
            }
            // 指定图表的配置项和数据
            option = {
                // 标题
                title: {
                    text: '2024最近半年岗位需求变化',
                    textStyle: {
                        color: "#fff",
                    },
                },
                xAxis: {
                    type: 'category',
                    data: x4,
                    axisLabel: {
                        color: "rgb(175,174,197)",
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    //修改坐标轴
                    axisLabel: {
                        color: "rgb(175,174,197)"
                    },
                    //修改背景线条样式
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgb(72,71,83)"
                        }
                    },
                    //是否显示坐标轴轴线
                    axisLine: {
                        show: true
                    }
                },
                series: [{
                    data: y4,
                    type: 'line',
                    smooth: true
                }],
                //网格配置
                grid: {
                    //配合left right top bottom 设置图表的大小
                    left: '3%',
                    right: '8%',
                    bottom: '5%',
                    //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
                    containLabel: true
                },
                // 提示框组件。
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
            };

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }
    });

    window.addEventListener("resize", function() {
        myChart.resize()
    })
})();

(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.bottom'));

// 定义provinceCityMap, 用于将省会城市名映射为对应的省名
    var provinceCityMap = {
        '武汉': '湖北',
        '香港': '香港',
        '台北': '台湾',
        '上海': '上海',
        '北京': '北京',
        '广州': '广东',
        '福州': '福建',
        '呼和浩特': '内蒙古',
        '天津': '天津',
        '澳门': '澳门',
        '杭州': '浙江',
        '南京': '江苏',
        '成都': '四川',
        '济南': '山东',
        '沈阳': '辽宁',
        '昆明': '云南',
        '石家庄': '河北',
        '哈尔滨': '黑龙江',
        '西安': '陕西',
        '兰州': '甘肃',
        '长春': '吉林',
        '太原': '山西',
        '重庆': '重庆',
        '郑州': '河南',
        '长沙': '湖南',
        '南昌': '江西',
        '贵阳': '贵州',
        '南宁': '广西',
        '合肥': '安徽',
        '海口': '海南',
        '银川': '宁夏',
        '乌鲁木齐': '新疆',
        '拉萨': '西藏',
        '西宁': '青海'
    };

// 使用 AJAX 获取后端数据
    $.ajax({
        url: 'http://localhost:8080/zhilian/findAddressAndCount',
        type: 'GET',
        success: function(data) {
            var option = {
                title: {
                    text: "全国各省省会招聘职业数分布图",
                    textStyle: {
                        color: 'rgb(255,215,0)',
                    },
                    left: 'center',
                    top: '18%'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    show: true,
                    x: 'left',
                    y: 'bottom',
                    textStyle: {
                        fontSize: 9,
                        color: 'rgb(185,184,206)'
                    },
                    splitList: [{
                        start: 1,
                        end: 9
                    }, {
                        start: 10,
                        end: 99
                    }, {
                        start: 100,
                        end: 999
                    }, {
                        start: 1000,
                        end: 9999
                    }, {
                        start: 10000
                    }],
                    color: ['#334271', '#4d619d', '#6e8adf', '#94d7f1', '#cdeaf6']
                },
                series: [{
                    name: '岗位人数',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {
                            borderWidth: .5,
                            borderColor: '#009fe8',
                            areaColor: "#ffefd5",
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#fff",
                        }
                    },
                    label: { // 图形上的文本标签
                        normal: {
                            show: true, //省份名称

                            formatter: function(data) {
                                // 这里将省份名称映射为省会城市名
                                var provinceToCapitalMap = {
                                    '湖北': '武汉',
                                    '香港': '香港',
                                    '台湾': '台北',
                                    '上海': '上海',
                                    '北京': '北京',
                                    '广东': '广州',
                                    '福建': '福州',
                                    '内蒙古': '呼和浩特',
                                    '天津': '天津',
                                    '澳门': '澳门',
                                    '浙江': '杭州',
                                    '江苏': '南京',
                                    '四川': '成都',
                                    '山东': '济南',
                                    '辽宁': '沈阳',
                                    '云南': '昆明',
                                    '河北': '石家庄',
                                    '黑龙江': '哈尔滨',
                                    '陕西': '西安',
                                    '甘肃': '兰州',
                                    '吉林': '长春',
                                    '山西': '太原',
                                    '重庆': '重庆',
                                    '河南': '郑州',
                                    '湖南': '长沙',
                                    '江西': '南昌',
                                    '贵州': '贵阳',
                                    '广西': '南宁',
                                    '安徽': '合肥',
                                    '海南': '海口',
                                    '宁夏': '银川',
                                    '新疆': '乌鲁木齐',
                                    '西藏': '拉萨',
                                    '青海': '西宁'
                                };
                                return provinceToCapitalMap[data.name] || data.name;
                            },

                            fontSize: 8,

                        },
                        emphasis: { // 鼠标滑过地图高亮的相关设置
                            show: true,
                            fontSize: 8,
                        }
                    },
                    data: data.map(function(item) {
                        // 将省会名转换为省名
                        return { value: item.count, name: provinceCityMap[item.address] || item.address };
                    })
                }]
            };



            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize()
            });
        }
    });
})();